<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { RouterLink, useRouter } from 'vue-router'
import { useUserStore } from '@/stores/userStore'
import { LocalStorage } from '@/utils/tools'
const router = useRouter()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
console.log(userInfo.value)

const myOrder = () => {
  LocalStorage.getItem('token') && userInfo.value ? router.push('/mine/my-order') : router.push('/auth?model=login')
}

</script>

<template>
  <div class="header flex-row">
    <div class="left-wrapper">
      <!-- <div class="logo">
      </div> -->
      <ul class="nav-list">
        <router-link to="/">
          <li class="nav-item">首页</li>
        </router-link>
        <router-link to="/auth?model=login">
          <li class="nav-item">{{ userInfo.nickName ? `您好，${userInfo.nickName}` : '亲，请登录'}}</li>
        </router-link>
        <router-link to="/auth?model=register">
          <li class="nav-item">免费注册</li>
        </router-link>
        <router-link to="/auth">
          <li class="nav-item download">手机APP下载</li>
        </router-link>
      </ul>
    </div>
    <div class="right-wrapper">
      <ul class="nav-list">
        <li class="nav-item selection">
          <span>我的商品</span>
          <div class="choice-box">
            <span @click="myOrder">我的订单</span>
            <span>我的足迹</span>
          </div>
        </li>
        <li class="nav-item">
          <i class="iconfont icon-gouwuche"></i
          ><span class="special">购物车</span>
        </li>
        <li class="nav-item selection">
          <span><i class="iconfont icon-shoucang"></i>收藏夹</span>
          <div class="choice-box">
            <span>收藏的宝贝</span>
            <span>收藏的店铺</span>
          </div>
        </li>
      </ul>
      <div class="mine">我的</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.header {
  height: 50px;
  padding: 10px 150px;
  box-sizing: border-box;
  justify-content: space-between;
  border: #d9d9d9 1px solid;
  box-shadow: @shadow-color;
}

.left-wrapper,
.right-wrapper {
  display: flex;
  height: 100%;
}

.nav-list {
  display: flex;
  position: relative;
}

.nav-item {
  display: flex;
  padding: 5px 10px;
  height: 30px;
  font-size: @small-font-size;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
  i {
    display: inline-block;
    margin-right: 2px;
    vertical-align: middle;
    color: @primary-color;
  }
  .special {
    display: inline-block;
    margin-left: 2px;
  }
}

.nav-item:not(:last-child) {
  margin-right: 10px;
}

.mine {
  padding: 5px 10px;
  height: 30px;
  font-size: @small-font-size;
  box-sizing: border-box;
  cursor: pointer;
  display: none;
}

.nav-item.selection {
  display: block;
  position: relative;
  line-height: 20px;
  .choice-box {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 35px;
    width: 80px;
    height: 0;
    text-align: center;
    background: #fff;
    box-shadow: @shadow-color;
    z-index: 9999;
    transform: translate(-50%, 0);
    border-radius: @border-radius;
    transition: all @special-action;
    span {
      display: inline-block;
      width: 100%;
      height: 0;
      display: none;
      font-size: @small-font-size;
      transition: all @normal-action;
    }
  }
  &:hover .choice-box {
    height: 60px;
    padding: 5px;
    span {
      height: 20px;
      display: block;
    }
  }
  .choice-box::before {
    content: '';
    position: absolute;
    rotate: 180deg;
    transform-origin: 0;
    left: 50%;
    top: -10px;
    transform: translate(-50%, 0);
    width: 0;
    height: 0;
    border-width: 0px 0px 0 0px;
    border-style: solid;
    border-color: #fff transparent transparent;
    transition: all @special-action;
  }
  &:hover .choice-box::before {
    content: '';
    position: absolute;
    rotate: 180deg;
    transform-origin: 0;
    left: 50%;
    top: -10px;
    transform: translate(-50%, 0);
    width: 0;
    height: 0;
    border-width: 10px 10px 0 10px;
    border-style: solid;
    border-color: #fff transparent transparent;
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.1));
  }
}

@media screen and (max-width: 800px) {
  .header {
    padding: 10px 0px;
  }
}

@media screen and (max-width: 600px) {
  .nav-item.download {
    display: none;
  }
  .right-wrapper .nav-list {
    display: none;
  }
  .mine {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media screen and (max-width: 400px) {
}
</style>
